// src/pages/faq-management/index.tsx
import {PlusOutlined} from '@ant-design/icons';
import {ActionType, ProColumns, ProTable} from '@ant-design/pro-components';
import {Button, message, Popconfirm} from 'antd';
import React, {useRef, useState} from 'react';
import {addFaqCategoryAPI, deleteFaqCategoryAPI, pageFaqCategoryAPI, updateFaqCategoryAPI} from './service';
import FaqCategoryForm from './components/FaqCategoryForm';

const FaqCategoryManagement: React.FC = () => {
  const actionRef = useRef<ActionType>();

  // 处理删除
  const handleDelete = async (id: string) => {
    try {
      const {data} = await deleteFaqCategoryAPI(id);
      if (data) {
        message.success('删除成功');
        actionRef.current?.reload();
      }
    } catch (error) {
      message.error('删除失败，请重试');
    }
  };

  // 表格列配置
  const columns: ProColumns<API.IFaqCategory>[] = [
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '排序权重',
      dataIndex: 'sortOrder',
      key: 'sortOrder',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      valueEnum: {
        "0": {text: '启用', status: 'Success'},
        "1": {text: '禁用', status: 'Error'},
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      valueType: 'dateTime',
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record) => [
        <FaqCategoryForm
          key="edit"
          formType="edit"
          initialValues={record}
          onFinish={async (values) => {
            const {data} = await updateFaqCategoryAPI({...values, id: record?.id});
            if (data) {
              message.success('修改成功');
              actionRef.current?.reload();
            }
            return data;
          }}
          trigger={<a>编辑</a>}
        />,
        <Popconfirm
          key="delete"
          title="确定要删除这个分类吗?"
          onConfirm={() => handleDelete(record?.id || '')}
          okText="确定"
          cancelText="取消"
        >
          <a style={{color: 'red'}}>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <ProTable<API.IFaqCategory>
      headerTitle="问题分类管理"
      actionRef={actionRef}
      rowKey="id"
      search={{
        labelWidth: 120,
      }}
      toolBarRender={() => [
        <FaqCategoryForm
          key="create"
          formType="create"
          onFinish={async (values) => {
            const {data} = await addFaqCategoryAPI(values);
            if (data) {
              message.success('添加成功');
              actionRef.current?.reload();
            }
            return data
          }}
          trigger={
            <Button type="primary">
              <PlusOutlined/> 新建分类
            </Button>
          }
        />,
      ]}
      request={async (params) => {
        const {data} = await pageFaqCategoryAPI(params);
        return data;
      }}
      size={'small'}
      columns={columns}
    />
  );
};

export default FaqCategoryManagement;
